<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../static/css/accountSetting.css" th:href="@{/css/accountSetting.css}">
    <link rel="stylesheet" href="../static/css/iconfont.css"  th:href="@{/css/iconfont.css}">
    <link rel="stylesheet" href="../static/css/confirm..css"  th:href="@{/css/confirm.css}">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" th:href="@{https://code.jquery.com/jquery-3.6.0.min.js}"></script>
    <title>账户设置</title>
</head>
<body>
<header class="header">
    <h1 class="header__title">账户设置</h1>
    <p class="header__desc">修改账户的基本信息</p>
    <img class="logo" src="../static/img/logo.png" alt="" th:src="@{/img/logo.png}">
    <a class="back" href="http://localhost:8080/mainPageRecommend" th:href="@{/mainPageRecommend}">返回我的主页</a>
</header>
<div class="container">
    <nav class="nav">
        <ul class="nav__list">
            <li class="nav__item active">安全管理</li>
            <li class="nav__item">账号注销</li>
        </ul>
    </nav>
    <main class="main">
        <div class="password-change-container" style="display: block;">
            <h3 class="edit-password">修改密码</h3>
            <p class="title">您的账号当前处于安全环境，修改密码前需要安全验证</p>
            <div class="step-indicator">
                <div class="step" id="step1">
                    <div class="step-icon">
                        <span class="point1 step1-dots">...........</span>
                        <i class="iconfont step1-icon" id="protect" style="color: #6ce5fa;">&#xeb7e;</i>
                        <span class="point2 step1-dots">...........</span>
                    </div>
                    <div class="step-label">安全验证</div>
                </div>
                <div class="step" id="step2">
                    <div class="step-icon">
                        <span class="point3 step2-dots">...........</span>
                        <i class="iconfont step2-icon" id="protect">&#xeb7e;</i>
                        <span class="point4 step2-dots">............</span>
                    </div>
                    <div class="step-label">修改密码</div>
                </div>
                <div class="step" id="step3">
                    <div class="step-icon">
                        <span class="point5 step3-dots">...........</span>
                        <i class="iconfont step3-icon" id="protect">&#xeb7e;</i>
                        <span class="point6 step3-dots">..........</span>
                    </div>
                    <div class="step-label">操作成功</div>
                </div>
            </div>
            <div class="email-verification" id="email-verification" style="display: block">
                <div class="emil" th:text="${email}" ></div>
                <button id="email-confirm-btn" >确定</button>
                <input type="text" id="email-code" name="code" placeholder="请输入邮箱验证码">
                <button type="submit" id="email-verify-btn">验证</button>

            </div>
            <div class="password-change" id="password-change" style="display: none;">
                <div class="notice"> 8~20位字母、数字或字符,至少包含两种</div>
                <label for="new-password" class="new-password">新密码：</label>
                <input type="password" id="new-password" placeholder="请输入新密码">
                <i class="iconfont" id="open1">&#xebcc;</i><i id="close1" class="iconfont">&#xebcd;</i>
                <label for="confirm-password" class="confirm-password">确认新密码：</label>
                <input type="password" id="confirm-password" placeholder="请再次输入新密码">
                <i class="iconfont" id="open2">&#xebcc;</i><i id="close2" class="iconfont">&#xebcd;</i>
                <button id="confirm-btn">确认</button>
            </div>
            <div class="success-message" id="success-message" style="display: none;">
                <i  class="iconfont" id="sucess">&#xe611;</i>
                <p class="edit-sucess">恭喜你！密码修改成功!</p>
            </div>
        </div>
        <div class="die" style="display: none;">
            <div class="accout-die" th:data-user-id="${userId}">账号注销</div>
            <section class="section">
                <p class="text-danger">注销账户操作不可逆，请谨慎操作！注销账户须知:</p>
                <ul class="delete-account-list">
                    <li>处理账户资金和资产</li>
                    <li>解除关联和绑定</li>
                    <li>备份重要信息</li>
                    <li>发布的动态</li>
                    <li>删除上传的视频</li>
                    <li>删除文章</li>
                </ul>
            </section>
            <section id="sections">
                <img src="../static/img/img-security(1).png" alt="" class="die-photo" th:src="@{/img/img-security(1).png}">
                <button class="btn" id="bindEmailBtn">账号注销</button>
            </section>
        </div>
    </main>
</div>
<script src="../static/js/accountSetting.js" th:src="@{/js/accountSetting.js}"></script>
</body>
<script>
    console.log("文章数");
    let post = [[${email}]];
    console.log(post)
</script>
</html>